<script setup lang="ts">
import { ref, computed } from 'vue'
import type { FormInstance } from 'element-plus'
interface Form extends Record<string, any> {
  bikeCode?: string
  batteryCode?: string
}
const props = defineProps<{
  type: 'bike' | 'cabinet'
}>()
const form = defineModel<Form>({ required: true })
const formRef = ref<FormInstance | null>(null)

const emit = defineEmits(['search'])

const onSubmit = () => {
  emit('search')
}
const CodeLabel = computed(() => {
  if (props.type == 'bike') {
    return '车辆编号'
  } else {
    return '电柜编号'
  }
})
const CodeProp = computed(() => {
  if (props.type == 'bike') {
    return 'bikeCode'
  } else {
    return 'boxCode'
  }
})
const onReset = () => {
  formRef.value?.resetFields()
}
</script>
<template>
  <el-form ref="formRef" :model="form" @submit.prevent="onSubmit" :inline="true">
    <!-- 基础表单字段 -->
    <el-form-item :label="CodeLabel" :prop="CodeProp">
      <el-input v-model="form[CodeProp]" />
    </el-form-item>
    <slot name="before" />
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset" plain>重置</el-button>
    </el-form-item>
    <slot name="after" />
  </el-form>
</template>

<style scoped></style>
